<template>
  <div class="addComment">
    <!--写跟帖 没有激活状态 -->
    <div class="unactive" v-if="!isShowTextarea">
      <input
        type="text"
        placeholder="写跟帖"
        @focus="showTextarea"
        :value="content"
      />
      <div class="comment">
        <span class="iconfont iconpinglun-"></span>
        <div class="data">1020</div>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!--写跟帖 激活状态 -->
    <div class="active" v-if="isShowTextarea">
      <textarea
        rows="3"
        @blur="unShowTextarea"
        ref="textarea"
        v-model="content"
      ></textarea>
      <div class="btnSubmit" @click="handleClick">发送</div>
    </div>
  </div>
</template>

<script>
// 导入事件总线
import eventVue from "../../event";
export default {
  data() {
    return {
      isShowTextarea: false,
      content: "",
      commentId: "",
    };
  },
  created() {
    // // 页面推出前销毁
    // eventVue.$off("commentReply");
    // 使用事件总线监听 事件 对传输的数据进行后续处理
    eventVue.$on("commentReply", (commentId) => {
      // 将获取的评论的id存储在data
      this.commentId = commentId;
      //   监听点击回复按钮 激活输入框
      this.showTextarea();
    });
  },
  destroyed() {
    // 页面退出前销毁
    eventVue.$off("commentReply");
  },
  methods: {
    //   监听事件总线
    //   监听点击发送按钮
    handleClick() {
      // 手动触发事件且发送文本域的数据
      //   this.$emit("sentComment", this.content, this.parentId);
      // 点击发送按钮发送请求
      this.$axios({
        method: "post",
        url: "/post_comment/" + this.$route.query.id,
        data: {
          content: this.content,
          parent_id: this.commentId,
        },
      }).then((res) => {
        // console.log(res, "评论文章");
        // 发送请求成功后更新页面评论数据
        if (res.data.message == "评论发布成功") {
          // 根据文章id 更新详情页面跟帖评论内容
          this.$emit("loadComment");
          // 清空输入框的内容
          this.connent = "";
        }
      });
    },
    showTextarea() {
      // 输入框的激活状态
      this.isShowTextarea = true;
      //   文本域自动聚焦 由于vue执行机制是先js再渲染结构的，一旦在js代码操作了dom元素就会出现报错
      // 解决：将操作了dom的代码延时处理或使用$nextTick表示在下一次页面渲染后执行
      this.$nextTick(() => {
        // 下一次渲染结构执行 自动聚焦
        this.$refs.textarea.focus();
      });
    },
    unShowTextarea() {
      // 输入框的隐藏状态
      // 处理失焦状态之前完成点击
      //   失焦延时处理
      setTimeout(() => {
        // 失焦事件触发需要清空之前回复的资料 评论的id
        this.commentId = "";
        // 触发失焦事件
        this.isShowTextarea = false;
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
.addComment {
  position: fixed;
  bottom: 0/360 * 100vw;
  left: 0/360 * 100vw;
  width: 100%;
  background-color: #e4e4e4;
  .unactive {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20/360 * 100vw 0;
    .iconfont {
      font-size: 22/360 * 100vw;
    }
    input {
      background-color: #d7d7d7;
      border: none;
      outline: none;
      width: 180/360 * 100vw;
      height: 30/360 * 100vw;
      padding: 0 20/360 * 100vw;
      border-radius: 15/360 * 100vw;
      box-sizing: border-box;
      font-size: 14/360 * 100vw;
      color: #333;
    }
    .comment {
      position: relative;
      padding-top: 4/360 * 100vw;
      .data {
        position: absolute;
        top: -2/360 * 100vw;
        left: 4/360 * 100vw;
        font-size: 12/360 * 100vw;
        line-height: 16/360 * 100vw;
        padding: 0 4/360 * 100vw;
        border-radius: 8/360 * 100vw;
        color: #fff;
        background-color: red;
      }
    }
  }
  .active {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 16/360 * 100vw;
    padding: 10/360 * 100vw;

    textarea {
      background-color: #d7d7d7;
      border: none;
      outline: none;
      // 取消拉伸文本域
      resize: none;
      height: 90/360 * 100vw;
      width: 260/360 * 100vw;
      border-radius: 8/360 * 100vw;
      padding: 10/360 * 100vw;
      box-sizing: border-box;
    }
    .btnSubmit {
      background-color: red;
      height: 26/360 * 100vw;
      line-height: 26/360 * 100vw;
      color: #fff;
      font-size: 14/360 * 100vw;
      padding: 0 14/360 * 100vw;
      border-radius: 13/360 * 100vw;
      margin-right: 6/360 * 100vw;
    }
  }
}
</style>
